<template>
  <a-col :md="opt.total" :sm="opt.total">
    <a-form-item
      :label="label"
      :label-col="{ span: opt.labelWidth }"
      :wrapper-col="{ span: opt.wrapperWidth, offset: opt.offsetWidth }"
    >
      <slot />
    </a-form-item>
  </a-col>
</template>

<script>
export default {
  name: 'SListFormItem',
  props: {
    label: {
      type: String,
      require: false,
      default: ''
    },
    size: {
      type: String,
      require: false,
      default: 'middle'
    }
  },
  data() {
    return { opt: this.init() }
  },
  watch: {
    size() {
      this.opt = this.init()
    }
  },
  methods: {
    init() {
      switch (this.size) {
        case 'small':
          return {
            labelWidth: 5,
            wrapperWidth: 18,
            offsetWidth: 1,
            total: 4
          }
        case 'middle':
          return {
            labelWidth: 5,
            wrapperWidth: 18,
            offsetWidth: 1,
            total: 6
          }
        case 'big':
          return {
            labelWidth: 5,
            wrapperWidth: 18,
            offsetWidth: 1,
            total: 8
          }
        case 'custom':
          return this.options
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
